<template>
  <div class="box">
    <div class="row">
      <div style="line-height: 54px">首页</div>
      <van-icon
        style="line-height: 54px"
        name="search"
        @click="$router.push('sousuo')"
      />
    </div>
    <div class="row2">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="/1.jpg" /></van-swipe-item>
        <van-swipe-item><img src="/1.jpg" /></van-swipe-item>
        <van-swipe-item><img src="/1.jpg" /></van-swipe-item>
        <van-swipe-item><img src="/1.jpg" /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="row3">
      <van-grid :border="false" :column-num="4">
        <van-grid-item @click="$router.push('baike')">
          <van-image src="/3.jpg" /> <span>宠物百科</span>
        </van-grid-item>
        <van-grid-item @click="$router.push('ly')">
          <van-image src="/wd.jpg" /> <span>宠物领养</span>
        </van-grid-item>
               
        <van-grid-item @click="$router.push('shangpin')">
                    <van-image src="/wd.jpg" /> <span>宠物装备</span>         </van-grid-item
        >   
        <van-grid-item @click="$router.push('pet')">
                    <van-image src="/wd.jpg" /> <span>宠物配对</span>      
        </van-grid-item>
             
      </van-grid>
       
    </div>
    <div class="row4">
      <h3>明星宠物</h3>
      <img src="/1.jpg" alt="" />
      <img src="/2.jpg" alt="" />
    </div>
    <hr />
    <h3>今日推荐</h3>
    <van-image class="tjtp" src="1.jpg" />
    <div class="row5" style="height: 300px">
      <h3>最新上架</h3>
      <van-swipe @change="onChange">
        <van-swipe-item>
          <img src="/3.jpg" />
          <p>名称 价钱</p>
        </van-swipe-item>
        <van-swipe-item
          ><img src="/2.jpg" />
          <p>名称 价钱</p>
        </van-swipe-item>
        <van-swipe-item
          ><img src="/2.jpg" />
          <p>名称 价钱</p>
        </van-swipe-item>
        <van-swipe-item
          ><img src="/2.jpg" />
          <p>名称 价钱</p>
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/4</div>
        </template>
      </van-swipe>
    </div>
    <hr />
    <div class="row6">
      <h3>精品宠物馆</h3>
      <van-image width="9rem" height="5rem" fit="fill" src="/1.jpg" />
      <p>名称</p>
      <van-image width="9.5rem" height="5rem" fit="fill" src="/1.jpg" />
      <p>名称</p>
      <van-image width="9.5rem" height="5rem" fit="fill" src="/1.jpg" />
      <p>名称</p>
      <van-image width="9.5rem" height="5rem" fit="fill" src="/1.jpg" />
      <p>名称</p>
    </div>
    <my-footer />
  </div>
</template>

<script>
import MyFooter from "@/components/MyFooter.vue";

export default {
  components: { MyFooter },

  data() {
    MyFooter;
    return {
      current: 0,
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-image__img {
  border-radius: 8px;
}
::v-deep .van-grid-item__content {
  background-color: rgba(0, 0, 0, 0);
}
h3 {
  font-weight: 545;
  border: 1px green;
  width: 100px;
  font-size: 20px;
  background-color: orange;
  color: white;
  text-align: center;
  margin-bottom: 5px;
}
body {
  background-image: url("../../public/bj.jpg");
}
.box {
  padding: 15px 10px 0 10px;
  background-color: #d8f1ef;
}
.row {
  display: flex;
  justify-content: space-between;
  font-size: 22px;
  font-weight: 545;
  margin-bottom: 15px;
}
.row .my-swipe .van-swipe-item img {
  width: 100%;
  border-radius: 10px;
}

.row4 img {
  width: 100%;
  height: 200px;
}
.tjtp {
  width: 100%;
  height: 200px;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.row5 {
  position: relative;
}
.van-swipe-item img {
  width: 100%;
  height: 200px;
}
.van-swipe-item p {
  margin: 2px 10px;
}
.row6 {
  margin-bottom: 50px;
}

.row6 p {
  padding: 0 150px;
}
</style>
